<template>
  <div class="wrapper">
    <dx-header-bar title="客户拜访"></dx-header-bar>
    <dx-search-bar placeholder="搜索" @click.native="showSearchPopup"></dx-search-bar>
    <dx-search-visit
      ref="searchPopup"
      :default-name="params.customerName"
      :default-code="params.customerCode"
      @on-search="search"
    ></dx-search-visit>
    <md-scroll-view
      ref="scrollView"
      class="scrollView"
      :scrolling-x="false"
      @refreshing="$_onRefresh"
      @endReached="$_onEndReached">
      <md-scroll-view-refresh
        slot="refresh"
        slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
        :scroll-top="scrollTop"
        :is-refreshing="isRefreshing"
        :is-refresh-active="isRefreshActive"
      ></md-scroll-view-refresh>
      <md-field
        class="scroll-view-item"
        v-for="(item,index) in dataList"
        :key="index"
        @click.native="download(item)"
      >
        <div slot="header" class="view-item-header">
          <span class="index">{{index+1}}.</span>
          <span class="title">{{item.CUSTOMER_NAME}}</span>
        </div>
        <md-detail-item title="客户编号：">
          <div class="detail-item-content">{{item.CUSTOMER_CODE}}</div>
        </md-detail-item>
        <md-detail-item title="拜访时间：">
          <div class="detail-item-content">{{item.VISIT_TIME_STRING}}</div>
        </md-detail-item>
        <md-detail-item title="地市：">
          <div class="detail-item-content">{{item.REGION}}</div>
        </md-detail-item>
      </md-field>
      <md-scroll-view-more
        slot="more"
        :is-finished="isFinished"
        :finished-text="finishedText"
      >
      </md-scroll-view-more>
    </md-scroll-view>
  </div>
</template>

<script type="text/ecmascript-6">
import { DxHeaderBar, DxSearchBar, DxSearchVisit } from '@/components';
import { getCustomerVisit } from '@/api/resource';
import { ScrollView, ScrollViewRefresh, ScrollViewMore, Field, DetailItem, Dialog } from 'mand-mobile';

export default {
  name: 'visit',
  components: {
    DxHeaderBar,
    DxSearchBar,
    DxSearchVisit,
    [ScrollView.name]: ScrollView,
    [ScrollViewMore.name]: ScrollViewMore,
    [Field.name]: Field,
    [DetailItem.name]: DetailItem,
    [ScrollViewRefresh.name]: ScrollViewRefresh
  },
  data() {
    return {
      params: {
        customerName: this.$route.query.customerName,
        customerCode: this.$route.query.customerCode,
        page: 1,
        limit: 10
      },
      dataList: [],
      isFinished: false
    };
  },
  computed: {
    finishedText() {
      return this.dataList.length ? '已全部加载' : '没有数据';
    }
  },
  mounted() {
    this.$refs.scrollView.triggerRefresh();
  },
  methods: {
    showSearchPopup() {
      this.$refs.searchPopup.showPopup();
    },
    search(form) {
      this.params.page = 1;
      this.params.customerCode = form.customerCode;
      this.params.customerName = form.customerName;
      this.$refs.scrollView.triggerRefresh();
    },
    download(data) {
      if (data.PATH === null) {
        Dialog.alert({
          title: '提示',
          content: '暂无文件',
          confirmText: '确定'
        });
      } else {
        const url = `${process.env.VUE_APP_BASE_PATH}/easysightInt/${data.PATH}`;
        const index = data.PATH.indexOf('.');
        const index2 = data.PATH.indexOf('?');
        const type = data.PATH.slice(index + 1, index2);
        if (window.dx) {
          window.dx.dxDownload(url, type);
        } else {
          window.dxDownload(url, type);
        }
      }
    },
    $_onRefresh() {
      this.isFinished = true;
      this.params.page = 1;
      this.loadCustomerVisit();
    },
    $_onEndReached() {
      if (this.isFinished) return;
      this.params.page += 1;
      this.loadCustomerVisit();
    },
    $_onFinished(data, isFinished) {
      this.isFinished = isFinished;
      if (this.params.page === 1) {
        this.dataList = data;
        this.$refs.scrollView.finishRefresh();
      } else {
        this.dataList = this.dataList.concat(data);
        this.$refs.scrollView.finishLoadMore();
      }
    },
    loadCustomerVisit() {
      getCustomerVisit(this.params).then(result => {
        const data = result.data.datas;
        if (data instanceof Array && data.length) {
          this.$_onFinished(data, this.params.page * this.params.limit > result.data.extInfo.total);
        } else {
          this.$_onFinished([], true);
        }
      }).catch(error => {
        this.$_onFinished([], true);
        console.log(error);
      });
    }
  }
};
</script>

<style scoped lang="stylus">
  .wrapper
    height : 100%
    display : flex
    flex-direction : column

  .scrollView
    flex : 1

    .scroll-view-item
      color : theme-color
      font-size : 32px
      margin-bottom : 20px

      .view-item-header
        font-size : 32px
        font-weight : bold

        .index
          margin-right : 20px
          color : #333

  .detail-item-content
    flex : 1

  table
    thead
      background : #f5f9fe

    th, td
      padding : 30px 10px
      font-size : 26px
      text-align : center
      border-right : 1px solid #eee
      border-bottom : 1px solid #eee

    tbody
      tr
        background : #f9f9f9

        &:nth-of-type(2n)
          background : #fff
</style>
